.server {
  .nodata {
    height: 4rem;
    text-align: center;
    line-height: 4rem;
  }
  >span.ArrowSpan {
    position: fixed;
    top: 0.7rem;
    left: 0.8rem;
    z-index: 99999999999999999999;
    i.arrow {
      padding: 0.3rem;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
  }
  .serverList {
    background-color: #fff;
    padding: 0 0.375rem;
    display: flex;
    flex-wrap: wrap;
    >div {
      width: 50%; // border: 1px solid #ddd;
      border-top: none;
      padding: 0 0.375rem; // box-shadow:-10px 0 10px red, /*左边阴影*/  
      // box-shadow:  0 2px 2px #ddd; /*底边阴影*/  
      .shopImg {
        width: 8.25rem;
        height: 6rem;
        padding-top: 0.75rem;
        >img {
          height: 100%;
          width: 100%;
          border-radius: 0.2rem;
        }
      }
      >p {
        margin: 0.3rem 0;
        font-size: 0.75rem;
        font-family: PingFangSC;
        text-align: left;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden; 
      }
      >.serverShopPrice {
        text-align: left;
        vertical-align: middle;
        >span.price {
          color: #f25d5d;
          font-size: 0.75rem;
          font-weight: 700;
        }
        >span.delPrice {
          font-size: 0.5rem;
          padding-left: 0.2rem;
          text-decoration: line-through;
          color: #999999;
        }
      }
      >div.saleNum {
        padding: 0.2rem 0;
        >span {
          font-size: 0.6rem;
        }
      }
    }
  }
  .top {
    position: relative;
    z-index: 300;
    height: 2rem;
    background-color: #fff;
    overflow: hidden;
    .moveNav {
      position: relative;
      height: 2rem;
    }
    .nav {
      overflow-x: hidden; //position: absolute;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      -webkit-scroll-snap-type: mandatory;
      top: 0px;
      left: 0px;
      >div {
        // padding-left: 1rem;
        width: 4.6875rem;
        >span {
          display: inline-block;
          padding: .5rem 0;
        }
      }
    }
    .nav>div>span.active {
      color: #08bae3;
      border-bottom: 1px solid #08bae3
    }
  }
  .filtrate {
    .upIcon {
      width: 0.3rem;
      height: 0.375rem;
      border-top: 0.3rem solid #fff;
      border-left: 0.3rem solid #fff;
      border-right: 0.3rem solid #fff;
      border-bottom: 0.3rem solid #08bae3;
    }
    .downIcon {
      width: 0.3rem;
      height: 0.375rem;
      border-bottom: 0.3rem solid #fff;
      border-left: 0.3rem solid #fff;
      border-right: 0.3rem solid #fff;
      border-top: 0.3rem solid #08bae3;
    }
    .IconTop {
      border-top-color: #999;
    }
    .IconBottom {
      border-bottom-color: #999;
    }
    .isTop {
      border-bottom: 0.3rem solid #08bae3 !important;
    }
    .isBottom {
      border-top: 0.3rem solid #08bae3 !important;
    }
    position: relative;
    z-index: 500;
    background-color: #fff;
    >.filtrateTop {
      height: 2rem;
      align-items: center;
      position: relative;
      z-index: 500;
      background-color: #fafafa; // box-shadow: 0px 1px 0 0 #e6e6e6;
      >div.flexItem {
        width: 25%;
        position: relative;
      }
      div.zunhe {
        >div {
          position: absolute;
          display: inline-block;
          right: 0;
          top: -0.1rem;
          background-color: #ffffff;
        }
      }
      div.Price {
        >div {
          position: absolute;
          display: inline-block;
          right: 0.8rem;
          top: -0.1rem;
          background-color: #ffffff;
          >.upIcon {
            border-bottom-color: #999999;
          }
          >.downIcon {
            border-top-color: #999999;
          }
        }
      }
      div.selectIcon {
        border-left: 1px solid #ccc;
        img {
          width: .625rem;
          height: .625rem;
          position: absolute;
          top: 0.25rem;
          right: 0.8rem;
        }
      }
    }
    >.dropDown {
      .content {
        position: absolute;
        height: 0rem;
        width: 100%;
        top: 2rem;
        left: 0;
        z-index: 10;
        background-color: #fff;
        transition: height .3s;
        &.up {
          height: 6.6rem;
        }
        .item {
          height: 2.2rem;
          line-height: 2.2rem;
          text-align: left;
          font-family: PingFangSC;
          padding-left: 1rem;
          color: #999999;
          position: relative;
          border-bottom: 1px solid #f2f2f2; // background-color: rebeccapurple;
          >img {
            width: 0.625rem;
            height: 0.5rem;
            position: absolute;
            top: 0.8rem;
            right: 1rem;
          }
        }
        .itemColor {
          color: #08bae3
        }
      }
    }
  }
  .mask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 200;
    display: block;
  }
  .bigmask {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 5000;
    display: block;
  }
  .leftConten {
    position: fixed;
    z-index: 10000;
    right: 0;
    bottom: 0;
    top: 0;
    width: 80%;
    height: calc(100vh);
    background-color: #fff;
    transform: translateX(100%);
    transition: transform .3s;
    overflow-y: scroll;
  }
  .upLeft {
    transform: translateX(0);
  }
  .condition {
    height: calc(100vh);
    width: 100%;
    padding: 0 .5rem; // background-color: red;
    .tit {
      padding-top: 2.6rem;
      text-align: left;
      font-family: PingFangSC;
      font-size: 0.8rem;
      color: #666666;
    }
  }
}

.server {
  .condition {
    // position: relative;
    .price {
      padding: 1rem 0;
      >input {
        color: #999;
        width: 6rem;
        height: 2rem;
        background-color: #f0f0f0;
        text-align: center;
        border-radius: 0.15rem;
        span {
          color: #cccccc;
        }
      }
    }
    .serverTime {
      padding-top: 0;
      padding-bottom: 1rem;
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      span {
        width: 6.8rem;
        height: 2rem;
        background-color: #f0f0f0;
        margin-right: 0.2rem;
        margin-bottom: 0.2rem;
      }
      .spanColor {
        background-color: #08bae3
      }
    }
    .buttomBtn {
      position: fixed;
      z-index: 10000;
      width: 100%;
      left: 0;
      bottom: 0;
      span {
        height: 2.5rem;
        line-height: 2.5rem;
      }
      span.right {
        background-color: #f0f0f0;
      }
      span.left {
        background-color: #08bae3;
      }
    }
  }
}
